<template>
  <div class="box">
    <div
      style="
        margin: 0 auto;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 20px;
        text-align: center;
      "
    >
      <span style="font-size: 40px; font-weight: bold; color: #67c23a"
        >山东大学软件学院团支部工作日志后台管理</span
      >
    </div>

    <!-- 添加团支部 -->
    <div style="width: 80%; margin: 0 auto; margin-bottom: 20px">
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-form-item label="年级">
          <el-input
            v-model="newLeague.grade"
            style="width: 150px"
            placeholder="请填写:yyyy"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input
            v-model="newLeague.theClass"
            style="width: 200px"
            placeholder="请填写:xxxxxx班"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="newLeague.password"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 120px; margin: 0 auto; margin-left: 50px"
            type="primary"
            @click="add"
            >添加团支部</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div
      style="width: 80%; margin: 0 auto; border: 1px grey; border-radius: 10px"
    >
      <el-table ref="filterTable" :data="tableData" style="width: 100%">
        <el-table-column
          prop="grade"
          label="年级"
          sortable
          width="120"
          column-key="grade"
          :filters="grades"
          :filter-method="filterHandler"
        >
        </el-table-column>
        <el-table-column prop="theClass" label="班级" width="180">
        </el-table-column>
        <el-table-column prop="user" label="支部名称" width="300px">
        </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="search(scope.$index)"
              type="text"
              size="small"
            >
              查看支部资料
            </el-button>
            <el-button
              @click.native.prevent="deleteL(scope.$index)"
              type="text"
              size="small"
            >
              删除支部
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="团支部资料" :visible.sync="dialogVisible">
      <el-form
        :model="form"
        style="
          width: 100%;
          margin: 0 auto;
          padding-top: 25px;
          padding-bottom: 25px;
          padding-left: 35px;
          padding-right: 35px;
        "
      >
        <el-form-item label="团支部名称:">
          <span>{{ form.basicInfo.leagueName }}</span>
        </el-form-item>
        <el-form-item label="所属学院:">
          <span>{{ form.basicInfo.college }}</span>
        </el-form-item>
        <el-form-item label="团支部书记:">
          <span>{{ form.basicInfo.secretary }}</span>
        </el-form-item>
        <el-form-item label="团支部副书记:">
          <span>{{ form.basicInfo.deSecretary }}</span>
        </el-form-item>
        <el-form-item label="团支部委员:">
          <span>{{ form.basicInfo.comitteeman }}</span>
        </el-form-item>
        <el-form-item label="团员认识:">
          <span>{{ form.basicInfo.reservedNumber }}</span>
        </el-form-item>
        <el-form-item label="保留团籍的党员人数:">
          <span>{{ form.basicInfo.memberNumber }}</span>
        </el-form-item>
        <el-form-item label="支部logo:">
          <!-- <span>{{ form.logo }}</span> -->
          <img
            v-if="form.logo"
            :src="form.logo"
            style="max-height: 100px; max-width: 100px"
          />
        </el-form-item>
        <el-form-item label="支部口号:">
          <span>{{ form.slogan }}</span>
        </el-form-item>
        <el-form-item label="QQ群/微信群/其他:">
          <el-table :data="form.chatGroups">
            <el-table-column label="类型" prop="type"></el-table-column>
            <el-table-column label="账号" prop="groupNumber"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="所在校区:">
          <span>{{ form.campus }}</span>
        </el-form-item>
        <el-form-item label="联系人&联系电话:">
          <el-table :data="form.contacts">
            <el-table-column label="联系人" prop="contact"></el-table-column>
            <el-table-column
              label="联系电话"
              prop="phoneNumber"
            ></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getInfo, getLeagues, addLeague, deleteLeague } from '@/api/info'
import splitPane from '../components-demo/split-pane.vue'

export default {
  components: { splitPane },
  name: 'Main',
  //   components: { adminDashboard, editorDashboard },
  data() {
    return {
      //   currentRole: 'adminDashboard'
      dialogVisible: false,
      newLeague: {
        college: '',
        grade: '',
        theClass: '',
        password: ''
      },
      grades: [

      ],
      tableData: [
        {
          grade: '2020',
          theClass: '软件工程1班',
          password: '123467'
        }
      ],
      form:
      {
        basicInfo: {
          leagueName: '',
          college: '',
          secretary: '',
          deSecretary: '',
          comitteeman: '',
          reservedNumber: null,
          memberNumber: null
        },
        logo: '',
        slogan: '',
        chatGroups:
          [{
            type: '',
            groupNumber: ''
          }],
        campus: '',
        contacts: [{
          contact: '',
          phoneNumber: ''
        }]
      },

    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    //获取对应年级班级和年份信息
    this.initial();
  },
  mounted() {
    this.initial();
  },
  methods: {
    initial() {
      getLeagues().then(response => {
        this.tableData = response.data;

        let set = new Set();
        for (let i = 0; i < this.tableData.length; i++) {
          set.add(this.tableData[i].grade);
        }

        let grades = new Array();

        for (let key of set.keys()) {
          grades.push({ 'text': key, 'value': key });
        }

        this.grades = grades;
      }).catch(err => {
        console.log(err)
      });
    },
    search(index) {
      let user = this.tableData[index].grade + '级' + this.tableData[index].theClass + '团支部';
      let year = this.tableData[index].year;
      let data = {
        user: user,
        year: year
      };
      getInfo(data).then(response => {
        this.form = response.data;
        this.dialogVisible = true;
      }).catch(err => {
        this.form = {
          basicInfo: {
            leagueName: '',
            college: '',
            secretary: '',
            deSecretary: '',
            comitteeman: '',
            reservedNumber: null,
            memberNumber: null
          },
          logo: '',
          slogan: '',
          chatGroups:
            [{
              type: '',
              groupNumber: ''
            }],
          campus: '',
          contacts: [{
            contact: '',
            phoneNumber: ''
          }]
        };
        console.log(err);
      });

    },
    add() {
      if (this.newLeague.grade == '' || this.newLeague.theClass == '' || this.newLeague.password == '') {
        this.$message({
          type: 'error',
          message: '年级、班级、密码不能为空！！！'
        })
      } else {
        let grade = this.newLeague.grade;
        let theClass = this.newLeague.theClass;
        let user = grade + '级' + theClass + '团支部';
        let password = this.newLeague.password;
        let data = {
          grade: grade,
          theClass: theClass,
          user: user,
          password: password
        };
        addLeague(data).then(response => {
          console.log(response);
          this.$message({
            type: 'success',
            message: '成功添加:' + user
          })
          this.initial();
        }).catch(err => {
          console.log(err);
        });

        this.newLeague.grade = '';
        this.newLeague.theClass = '';
        this.newLeague.password = '';
      }
    },
    deleteL(index) {
      let user = this.tableData[index].grade + '级' + this.tableData[index].theClass + '团支部';
      let data = {
        user: user
      }
      deleteLeague(data).then(response => {
        this.$message({
          type: 'success',
          message: '成功删除:' + user
        })
        this.initial();
      }).catch(err => {
        console.log(err);
      });
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}
</style>